<script setup lang="ts">
import pc1 from '~/assets/imgs/depositarios/banner.png';
import mp1 from '~/assets/imgs/depositarios/banner-mp.png';

const DCQuery = useQuery({
  queryKey: [apis.apiActivityDepositCommissions.id],
  queryFn: () => apis.apiActivityDepositCommissions(undefined),
});
const depositCommissionsQry = useQuery({
  queryKey: [apis.apiActivityDepositCommissions.id],
  queryFn: () => apis.apiActivityDepositCommissions(undefined),
});

const DCDetail = computed(() => DCQuery.data.value ?? undefined);
const isDepositRebates = computed(() => depositCommissionsQry.data.value?.available);

const bp = useAppBreakpoints();
const router = useRouter();
</script>

<template>
  <swiper-slide v-if="isDepositRebates" class="swiper-slide">
    <div class="swiper-slide__item" @click="router.push({ name: RN.DEPOSITARIOS, query: { type: 30 } });">
      <img v-if="bp.tabletl" :src="pc1">
      <img v-else :src="mp1">
      <div class="swiper-slide__item-content">
        <I18nT v-if="bp.tabletl" keypath="Qc6WnNxHx6yWZytNKgk1" tag="div" class="title">
          <template #ratio>
            <span class="text-yellow"> {{ ((DCDetail?.parent_commissions_rate ?? 0) + (DCDetail?.root_commissions_rate ?? 0)) * 100 }}%</span>
          </template>
        </I18nT>
        <I18nT v-else keypath="Qc6WnNxHx6yWZytNKgkQ" tag="div" class="title">
          <template #ratio>
            <span class="text-yellow"> {{ ((DCDetail?.parent_commissions_rate ?? 0) + (DCDetail?.root_commissions_rate ?? 0)) * 100 }}%</span>
          </template>
        </I18nT>
        <AButton class="btn ant-cover__Button-3d-primary mt-5 lt-tablet:(my-1.1)" type="primary" @click="router.push({ name: RN.DEPOSITARIOS, query: { type: 30 } });">
          {{ $t('ruix7Lrm4wvh9gM_4_4S') }}
        </AButton>
      </div>
    </div>
  </swiper-slide>
</template>

<style scoped lang="scss">
@use './style.scss';
</style>
